<template>
  <div id="map"></div>
</template>
<script>
// import Feature from 'ol/Feature.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import { Fill, Stroke, Style, Text, Icon } from 'ol/style';
import { Vector as VectorSource } from 'ol/source.js';
import { Vector as VectorLayer } from 'ol/layer';
import { click, platformModifierKeyOnly } from 'ol/events/condition';
import { Select } from 'ol/interaction';
import Overlay from 'ol/Overlay';
// import Projection from 'ol/proj/Projection.js';
// import ImageStatic from 'ol/layer/ImageStatic';
// import { Point } from 'ol/geom';
import geoJson from './json/330226.json';
// import ImageLayer from 'ol/layer/Image';
// import Static from 'ol/source/ImageStatic';

import { defaults as defaultControls } from 'ol/control';

import DragPan from 'ol/interaction/DragPan';
export default {
  name: 'Map',
  components: {},
  data() {
    return {
      map: undefined,
      bgLayer: undefined,
      titLayer: undefined,

      select: undefined,
      overlayForm: undefined,
      initFirst: true
    };
  },
  methods: {
    showDetail() {
      alert(1);
    },
    // 阻止拖拽
    getPan() {
      let pan = null;
      this.map.getInteractions().forEach((element) => {
        if (element instanceof DragPan) {
          pan = element;
        }
      });
      return pan;
    },
    onLoad() {
      // const extent = [121.23700564, 29.10289, 122.12059021, 29.82158272];
      // const projection = new Projection({
      //   code: 'xkcd-image',
      //   units: 'pixels',
      //   extent: extent
      // });

      const that = this;
      const features = new GeoJSON({ featureProjection: 'EPSG:4326' }).readFeatures(geoJson);
      const vectorSource = new VectorSource({ features });

      // 地图图像颜色
      const styleFunction = (feature) => {
        const name = feature.values_.name;
        return new Style({
          stroke: new Stroke({
            color: '#A7B4E4',
            width: 1
          }),
          fill: new Fill({
            color: 'rgba(77,94,131,0)'
          }),
          text: new Text({
            text: name,
            overflow: true,
            fill: new Fill({ color: '#fff' }),
            font: 'normal normal 18px MicrosoftYaHei'
          }),
          image: new Icon({
            // displacement: [0, 10],
            offset: [0, 0],
            // offsetOrigin: 'top-right',
            // 图标缩放比例
            scale: 1,
            // 透明度
            opacity: 1,
            // 图标的url
            src: require('./blue-marker.png')
          })
        });
      };
      const vectorLayer = new VectorLayer({
        source: vectorSource,
        zIndex: 99,
        style: styleFunction
      });
      // 创建一个静态图像源
      // const imageSource = new Static({
      //   url: 'bg.png',
      //   imageExtent: extent
      // });

      // 创建图像图层
      // const imageLayer = new ImageLayer({
      //   source: imageSource
      // });
      // console.log(imageLayer);
      // 初始化
      that.map = new Map({
        target: 'map',
        layers: [vectorLayer],
        view: new View({
          projection: 'EPSG:4326',
          center: [121.43600464, 29.34028407],
          zoom: 10.8,
          minZoom: 10.8,
          maxZoom: 10.8
        }),
        // 隐藏放大放小按钮
        controls: defaultControls({
          zoom: false,
          rotate: false,
          attribution: false
        })
      });
      this.addSelectArea(vectorLayer);

      // 阻止拖拽
      // const pan = this.getPan();
      // pan.setActive(false);
    },
    // 添加点击事件
    addSelectArea(vectorLayer) {
      const selectFunc = (feature) => {
        const name = feature.values_.name;
        return new Style({
          fill: new Fill({
            color: '#937244'
          }),
          stroke: new Stroke({
            color: '#fff',
            width: 1
          }),
          text: new Text({
            text: name,
            fill: new Fill({ color: '#fff' }),
            font: 'normal normal 18px MicrosoftYaHei',
            overflow: true
          })
        });
      };

      const selectArea = new Select({
        condition: click,
        layers: [vectorLayer],
        toggleCondition: platformModifierKeyOnly,
        style: selectFunc
      });
      this.map.addInteraction(selectArea);

      // 创建一个图层
      const overlayForm = new Overlay({
        autoPan: true,
        positioning: 'center-left',
        offset: [0, 0],
        autoPanAnimation: {
          duration: 250
        }
      });
      this.initFirst = true;
      selectArea.on('select', (e) => {
        if (e.selected && e.selected.length) {
          const name = e.selected[0].values_.name;
          let loc = [121.43600464, 29.34028407];
          let num = 0;
          switch (name) {
            case '一市镇':
              loc = [121.46518707, 29.20671653];
              num = 1;
              break;
            case '桑洲镇':
              loc = [121.31223679, 29.16025648];
              num = 0;
              break;
            case '岔路镇':
              loc = [121.28665924, 29.23278488];
              num = 3;
              break;
            case '黄坛镇':
              loc = [121.31137848, 29.33130518];
              num = 5;
              break;
            case '跃龙街道':
              loc = [121.45523071, 29.29897464];
              num = 15;
              break;
            case '越溪乡':
              loc = [121.55788422, 29.2537546];
              num = 1;
              break;
            case '长街镇':
              loc = [121.72439575, 29.2603442];
              num = 4;
              break;
            case '胡陈乡':
              loc = [121.6828537, 29.37439662];
              num = 1;
              break;
            case '力洋镇':
              loc = [121.61281586, 29.36212939];
              num = 4;
              break;
            case '茶院乡':
              loc = [121.55033112, 29.34178047];
              num = 0;
              break;
            case '深甽镇':
              loc = [121.2845993, 29.45484496];
              num = 6;
              break;
            case '梅林街道':
              loc = [121.42347336, 29.39204687];
              num = 18;
              break;
            case '西店镇':
              loc = [121.40510559, 29.50057339];
              num = 23;
              break;
            case '强蛟镇':
              loc = [121.50518417, 29.49220633];
              num = 5;
              break;
            case '大佳何镇':
              loc = [121.57161713, 29.45454601];
              num = 2;
              break;
            case '桥头胡街道':
              loc = [121.51325226, 29.39294426];
              num = 6;
              break;
            case '前童镇':
              loc = [121.34382248, 29.24416898];
              num = 5;
              break;
          }
          overlayForm.setPosition(undefined);
          this.$nextTick(() => {
            const htmlStr = `
            <div class="areaBg-info">
              <div class="title">企业家数量 ${num} 人</div>
              <div class="button" id="goDetailPage" style="width:56px;height:18px;"></div>
            </div>l
          `;
            const parser = new DOMParser();
            const eleDom = parser.parseFromString(htmlStr, 'text/html').body.childNodes[0];
            overlayForm.setElement(eleDom);
            overlayForm.setPosition(loc);
            this.map.addOverlay(overlayForm);
            this.$nextTick(() => {
              if (this.initFirst) {
                document.getElementById('goDetailPage').addEventListener('click', () => {
                  this.$router.push({
                    path: '/companyPeople'
                  });
                });
              }
            });
          });
        } else {
          overlayForm.setPosition(undefined);
        }
      });
      // this.map.on('singleclick', e => {
      //   console.log(e);
      //   overlayForm.setPosition(undefined);
      // });
    }
  },
  created() {},
  mounted() {
    this.onLoad();
  }
};
</script>

<style lang="less" scoped>
#map {
  padding: 0px;
  margin: 0px;
  // width: 100%;
  // height: 100%;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 150px;
  bottom: 200px;
  top: 0;
}
</style>
<style lang="less">
.areaBg-info {
  background-image: url("./images/areaBg.png");
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 191px;
  height: 88px;
  .title {
    font-size: 14px;
    color: #e4f3ff;
    text-shadow: 0px 4px 13px rgba(0, 0, 0, 0.26);
    padding-top: 18px;
    padding-left: 62px;
    text-align: left;
  }
  .button {
    width: 56px;
    height: 18px;
    background-image: url("./images/button.png");
    background-size: 100% 100%;
    margin-left: 62px;
    margin-top: 6px;
    cursor: pointer;
  }
}
</style>
